import React from './react';
import ReactDOM from './react-dom';

function Counter(props) {
  let [number, setNumber] = React.useState(0);
  //此函数会在组件和DOM渲染之后执行，可以执行一些副作用的代码
  React.useEffect(() => {
    console.log('开启定时器');
    const timer = setInterval(() => {
      console.log('setNumber');
      setNumber(number => number + 1);
    }, 1000);
    //useEffect返回一个销毁函数，会在下次执行useEffect回调之前执行
    return () => { 
      console.log('清除定时器');
      clearInterval(timer);
    }
  },[number]);
  // console.log(1111)
  return (
    
    <div>{number}</div>
  )
}
ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);




// import React from './react';
// import ReactDOM from './react-dom';
// const CounterContext = React.createContext();

// function reducer(state = { number: 0 }, action) {
//   switch (action.type) {
//     case 'ADD':
//       return { number: state.number + 1 };
//     case 'MINUS':
//       return { number: state.number - 1 };
//     default:
//       return state;
//   }
// }
// function Counter() {
//   let { state, dispatch } = React.useContext(CounterContext);
//   return (
//     <div>
//       <p>{state.number}</p>
//       <button onClick={() => dispatch({ type: 'ADD' })}>+</button>
//       <button onClick={() => dispatch({ type: 'MINUS' })}>-</button>
//     </div>
//   )
// }
// function App() {
//   const [state, dispatch] = React.useReducer(reducer, { number: 0 });
//   return (
//     <CounterContext.Provider value={{ state, dispatch }}>
//       <Counter />
//     </CounterContext.Provider>
//   )
// }
// ReactDOM.render(
//   <App />,
//   document.getElementById('root')
// );
